<template>
    <van-nav-bar title="分类" :fixed="true" :placeholder="true" />
    <div class="classify">
        <!--导航栏开始-->
        <div class="classifyHeader">
            <van-search @click="search" v-model="value" placeholder="商品搜索，共238款好物" input-align="center" />
        </div>
        <!--导航栏结束-->

        <div class="classifyOne">
            <!--左边一级分类-->
            <div class="classifyLeft">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item v-for="(item, index) in categoryList" :key="index" :title="item.name"
                        @click="classifyTo(item.id)" />
                </van-sidebar>
            </div>
            <!--左边一级分类-->
            <!--左边二级分类-->
            <div class="classifyTwo">
                <img :src="currentCategory.picUrl" alt="" />
                <div class="classifyName">
                    <span></span>
                    <span>{{ currentCategory.name + '分类' }}</span>
                    <span></span>
                </div>
                <van-grid class="classifyGo" :border="false" :column-num="3">
                    <van-grid-item v-for="(item, index) in currentSubCategory" :key="index"
                        @click="priductList(item.id, index)">
                        <van-image :src="item.picUrl" />
                        <p style="margin-top: 0rem; margin-bottom: 0rem">{{ item.name }}</p>
                    </van-grid-item>
                </van-grid>
            </div>
            <!--左二级分类-->
        </div>
    </div>
</template>

<script>
import { service } from "../api/config";
export default {
    name: "ClassifyView",
    data() {
        return {
            value: "",
            activeKey: 0,
            categoryList: {},
            currentCategory: {},
            currentSubCategory: {},
        };
    },
    created() {
        service.get("/wx/catalog/index").then(res => {
            this.categoryList = res.data.data.categoryList;
            this.currentCategory = res.data.data.currentCategory;
            this.currentSubCategory = res.data.data.currentSubCategory;
        })
    },
    methods: {
        priductList(id, index) {
            this.$router.push({
                path: "/subcategories",
                query: {
                    id,
                    index
                },
            });
        },
        classifyTo(id) {
            service.get("/wx/catalog/current", {
                params: {
                    id: id
                }
            }).then(res => {
                this.currentSubCategory = res.data.data.currentSubCategory;
                this.currentCategory = res.data.data.currentCategory;
            })
        },
        search() {
            this.$router.push("/search");
        },
    },
};
</script>
<style scoped>
.classify {
    background-color: #f8f8f8;
}

.classifyHeader {
    width: 100%;
}

.classifyOne {
    padding-bottom: 100rem;
    display: flex;
}

.classifyLeft ul li {
    padding-top: 10rem;
    margin-bottom: 8rem;
    padding-left: 10rem;
    width: 70rem;
    height: 45rem;
    text-align: left;
}

.classifyTwo img {
    border-radius: 10rem;
    width: 90%;
    margin: 15rem;
}

.classifyGo {
    display: flex;
}

img.van-image__img {
    margin-top: 0rem;
}

.van-grid-item__content.van-grid-item__content--center {
    background-color: #f8f8f8;
}

.classifyGo>>>div {
    background-color: #f8f8f8;
}

.classifyName {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rem;
}

.classifyName span:nth-child(1),
span:nth-child(3) {
    width: 20rem;
    height: 0rem;
    border-top: 1px solid #E9EAEA;
}

.classifyName span:nth-child(2) {
    padding: 0 5rem;
}

.van-search {
    padding: 0;
}
</style>